/*
* Created on Tue Jun 13 2023 by Admin
*
* Copyright (c) 2023 shuangdi
*
* description: secondStep
*
* date: 2025/3/14
*/
<template>
  <div class="root_secondStep" ref="rootStep">
    <div class="progress_box" v-if="step!==4">
      <div style="width: 500px;height: 50px">
        <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage2" striped striped-flow/>
      </div>
      <p class="title" v-if="step === 1">准备抽取关系</p>
      <p class="title" v-if="step === 2">正在抽取关系中...</p>
      <p class="title" v-if="step === 3">抽取关系已完成</p>
    </div>
    <div class="graph_box " v-else>
      <div class="radio_box">
        <el-radio-group v-model="radioValue" @change="changeRadio">
          <el-radio :value="1" size="large">展示关系</el-radio>
          <el-radio :value="2" size="large">编辑关系</el-radio>
        </el-radio-group>
      </div>
      <div class="content_box">
        <div class="s_content_box" v-if="radioValue === 1">
          <AntV ref="AntVDom"></AntV>
        </div>
        <div class="s_content_box" v-else>
          编辑关系
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import AntV from '@/components/graph/index.vue'
import {nextTick, ref} from "vue";

let radioValue = ref(1)
const percentage2 = ref(0)
// 组件dom
let rootStep = ref(null)
// 进度条的步骤条
let step = ref(1)
// 图谱dom
let AntVDom = ref(null)
//进度条dom
let processDom = ref(null)
// 进度条完成
setTimeout(() => {
  step.value = 2
  processDom.value.getData()
}, 1000)
//图谱数据
const graphData = {
  nodes: [
    {nodeLabel: "本体1", id: 'node0', size: 50},
    {nodeLabel: "本体2", id: 'node1', size: 30},
    {nodeLabel: "本体3", id: 'node2', size: 30},
    {nodeLabel: "本体4", id: 'node3', size: 30},
    {nodeLabel: "实体1", id: 'node4', size: 30, isLeaf: true},
    {nodeLabel: "实体2", id: 'node5', size: 30, isLeaf: true},
    {nodeLabel: "实体3", id: 'node6', size: 15, isLeaf: true},
    {nodeLabel: "实体4", id: 'node7', size: 15, isLeaf: true},
    {nodeLabel: "实体5", id: 'node8', size: 15, isLeaf: true},
    {nodeLabel: "实体6", id: 'node9', size: 15, isLeaf: true},
    {nodeLabel: "实体7", id: 'node10', size: 15, isLeaf: true},
    {nodeLabel: "实体8", id: 'node11', size: 15, isLeaf: true},
    {nodeLabel: "实体9", id: 'node12', size: 15, isLeaf: true},
    {nodeLabel: "实体10", id: 'node13', size: 15, isLeaf: true},
    {nodeLabel: "实体11", id: 'node14', size: 15, isLeaf: true},
    {nodeLabel: "实体12", id: 'node15', size: 15, isLeaf: true},
    {nodeLabel: "实体13", id: 'node16', size: 15, isLeaf: true},
  ],
  edges: [
    {source: 'node0', target: 'node1'},
    {source: 'node0', target: 'node2'},
    {source: 'node0', target: 'node3'},
    {source: 'node0', target: 'node4'},
    {source: 'node0', target: 'node5'},
    {source: 'node1', target: 'node6'},
    {source: 'node1', target: 'node7'},
    {source: 'node2', target: 'node8'},
    {source: 'node2', target: 'node9'},
    {source: 'node2', target: 'node10'},
    {source: 'node2', target: 'node11'},
    {source: 'node2', target: 'node12'},
    {source: 'node2', target: 'node13'},
    {source: 'node3', target: 'node14'},
    {source: 'node3', target: 'node15'},
    {source: 'node3', target: 'node16'},
  ],
}

// 初始化图谱
async function readyGraph() {
  const data = {
    // 图谱数据
    data: {
      nodes: graphData.nodes,
      edges: graphData.edges
    },
    // 图谱配置项
    optionsConfig: {
      isNewData: true,
      bindNodeClick: true,
      layout: "d3Force",
      padding: [80, 80, 80, 80],
      animation: false,
      defaultNodeSize: 34,
      defaultLabelSize: 16,
      defaultNodeFill: '#6865cb',
      defaultFitView: 'center',
      behaviors: []
    },
    // 节点配置映射项
    configuration: {
      edgeLabel: 'labelName',
      edgeId: null,
      nodeId: "id",
      nodeLabel: "nodeLabel",
      source: "source",
      target: "target",
      nodeType: 'nodeType'
    }
  }
  if (graphData.nodes.length >= 60) {
    data.optionsConfig.defaultFitView = 'view'
  }
  AntVDom.value.initGraph(data);
}

async function changeRadio(value) {
  if (value === 1) {
    await nextTick()
    await readyGraph()
  }
}

let timer = setInterval(() => {
  step.value = 2
  if (percentage2.value === 100) {
    clearInterval(timer)
    step.value = 3
    setTimeout(async () => {
      step.value = 4
      await nextTick()
      rootStep.value.classList.add('loadingMask')
      // 初始化图谱
      readyGraph().then(() => {
        setTimeout(() => {
          rootStep.value.classList.remove('loadingMask')
        }, 1000)
      })
    }, 1000)
    return
  }
  percentage2.value = (percentage2.value % 100) + 10
}, 1000)
</script>

<style scoped lang="less">
.root_secondStep {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .progress_box {
    width: 650px;
    height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .title {
      font-size: 20px;
      font-weight: 600;
      color: #333333;
    }
  }

  .graph_box {
    width: 100%;
    height: 100%;

    .radio_box {
      height: 60px;
      background: #ececec;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    .content_box {
      box-sizing: border-box;
      padding: 16px 0;
      height: calc(100% - 60px);
      width: 100%;

      .s_content_box {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
</style>
